<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>下拉菜单 - UIkit 中文文档</title>
        <meta name="description" content="你可以在任何内容中使用UIkit的下拉菜单组件，比如一个按钮，都可以作为切换器用来切换下拉菜单。只需用一个带 data-uk-dropdown 属性的 <div> 元素将其包裹即可。添加 .uk-dropdown 类到一个子级的 <div> 元素来创建下拉菜单本身。一个下拉菜单可以通过鼠标悬停或者的点击的方式来切换，并且你还可以为可切换的下拉菜单定制不同的样式。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIKit下拉菜单,延迟下拉菜单,导航下拉菜单,对齐下拉菜单,下拉菜单自动翻转,响应式下拉菜单,下拉菜单滚动,选项卡下拉菜单,Dropdown">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li class="uk-active"><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">默认</li>
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>

                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>

                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>

                            <li class="uk-nav-header">页面元素</li>
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>

                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>

                            <li class="uk-nav-header">JavaScript组件</li>
                            <li class="uk-active"><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动器</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                             <h1 class="uk-article-title">下拉菜单</h1>

                            <p class="uk-article-lead">为可拨动的下拉菜单定义不同的样式</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>任意内容，比如一个按钮，都可以作为切换器用来切换下拉菜单。只需用一个带 <code>data-uk-dropdown</code> 属性的 <code>&lt;div&gt;</code> 元素将其包裹即可。添加 <code>.uk-dropdown</code> 类到一个子级的 <code>&lt;div&gt;</code> 元素来创建下拉菜单本身。一个下拉菜单可以通过鼠标悬停或者的点击的方式来拨动。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Data 属性</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>data-uk-dropdown</code></td>
                                            <td>鼠标悬停打开下拉菜单，并添加一个很小的延迟，这样下拉菜单便不会在你停止在拨动器上悬停时立即消失。</td>
                                        </tr>
                                        <tr>
                                            <td><code>data-uk-dropdown="{mode:'click'}"</code></td>
                                            <td>通过点击拨动器来打开下拉菜单，再次点击，下拉菜单便关闭。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p><span class="uk-badge uk-badge-danger">重要</span> 为了应用一个下拉菜单，其父元素拥有一个能恰当地将二者对齐的相对位置是很重要的。 很多组件默认地创建了这样的定位场景，比如 <a href="button.html" title="Button">按钮</a>，<a href="navbar.html" title="Navbar">导航栏</a>，<a href="subnav.html" title="Subnav">二级导航</a> 和 <a href="tab.html" title="Tab">选项卡</a> 等组件。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <div class="uk-margin">

                                <div class="uk-button-dropdown" data-uk-dropdown>
                                    <button class="uk-button">鼠标来悬停我呀 <i class="uk-icon-caret-down"></i></button>
                                    <div class="uk-dropdown">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="uk-button-dropdown" data-uk-dropdown="{mode:'click'}">
                                    <button class="uk-button">点击我呀 <i class="uk-icon-caret-down"></i></button>
                                    <div class="uk-dropdown">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </div>

                            </div>

                            <p><span class="uk-badge">注意</span> 在这个例子理我们使用了 <a href="button.html" title="Button component">按钮组件</a> 作为拨动器。</p>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;!-- 这是JavaScript关联的容器 --&gt;
&lt;div data-uk-dropdown&gt;

    &lt;!-- 拨动下拉菜单的元素 --&gt;
    &lt;div&gt;...&lt;/div&gt;

    &lt;!-- 这是下拉菜单 --&gt;
    &lt;div class="uk-dropdown"&gt;...&lt;/div&gt;

&lt;/div&gt;

&lt;!-- 这是关联了点击模式的JavaScript的容器 --&gt;
&lt;div data-uk-dropdown="{mode:'click'}"&gt;

    &lt;!-- 拨动下拉菜单的元素 --&gt;
    &lt;div&gt;...&lt;/div&gt;

    &lt;!-- 这是下拉菜单 --&gt;
    &lt;div class="uk-dropdown"&gt;...&lt;/div&gt;

&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>在悬停模式下延迟下拉菜单</h3>

                            <p>你可以设置一个以毫秒为单位的 <code>delay</code> 参数来防止下拉菜单立即显示出来。</p>

                            <div class="uk-button-dropdown" data-uk-dropdown="{delay: 1000}">
                                <button class="uk-button">来悬停我呀 <i class="uk-icon-caret-down"></i></button>
                                <div class="uk-dropdown">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div class="uk-dropdown" data-uk-dropdown="{delay: 1000}"&gt;
    ...
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>带有导航菜单的下拉菜单</h3>

                            <p>下拉菜单可以包含一个 <a href="nav.html">导航菜单</a>，只需添加 <code>.uk-nav</code> 类和 <code>.uk-nav-dropdown</code> 修饰类到一个 <code>&lt;ul&gt;</code> 元素中。</p>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div class="uk-dropdown"&gt;
    &lt;ul class="uk-nav uk-nav-dropdown"&gt;...&lt;/ul&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="alignment-modifiers"><a href="#alignment-modifiers" class="uk-link-reset">对齐修饰</a></h2>

                            <p>给下拉菜单添加对齐样式，只需添加以下<code>pos:''</code>参数中的一个到 data属性就行了。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>参数</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>pos:'bottom-left'</code></td>
                                            <td>默认。下方左对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'bottom-center'</code></td>
                                            <td>下方居中对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'bottom-right'</code></td>
                                            <td>下方右对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'top-left'</code></td>
                                            <td>上方左对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'top-center'</code></td>
                                            <td>上方居中对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'top-right'</code></td>
                                            <td>上方右对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'left-top'</code></td>
                                            <td>左侧顶部对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'left-center'</code></td>
                                            <td>左侧垂直居中对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'left-bottom'</code></td>
                                            <td>左侧底部对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'right-top'</code></td>
                                            <td>右侧顶部对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'right-center'</code></td>
                                            <td>右侧垂直居中对齐</td>
                                        </tr>
                                        <tr>
                                            <td><code>pos:'right-bottom'</code></td>
                                            <td>右侧底部对齐</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-button-dropdown" data-uk-dropdown="{pos:'bottom-center'}">
                                <button class="uk-button">Bottom Center <i class="uk-icon-caret-down"></i></button>
                                <div class="uk-dropdown">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="uk-button-dropdown" data-uk-dropdown="{pos:'top-right'}">
                                <button class="uk-button">Top Right <i class="uk-icon-caret-up"></i></button>
                                <div class="uk-dropdown">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="uk-button-dropdown" data-uk-dropdown="{pos:'left-center'}">
                                <button class="uk-button"><i class="uk-icon-caret-left"></i> Left Center</button>
                                <div class="uk-dropdown">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="uk-button-dropdown" data-uk-dropdown="{pos:'right-top'}">
                                <button class="uk-button">Right Top <i class="uk-icon-caret-up"></i></button>
                                <div class="uk-dropdown">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-dropdown="{pos:'bottom-center'}"&gt; ... &lt;/div&gt;

&lt;div data-uk-dropdown="{pos:'top-right'}"&gt; ... &lt;/div&gt;

&lt;div data-uk-dropdown="{pos:'left-center'}"&gt; ... &lt;/div&gt;

&lt;div data-uk-dropdown="{pos:'right-top'}"&gt; ... &lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>调整下拉菜单</h3>

                            <p>调整下拉菜单，只需添加 <code>data-uk-dropdown="{justify:'#ID'}"</code>属性。需要调整的下拉菜单的父元素需要有一个标记id，这样下拉菜单便会扩宽度至这个被标记的元素的宽度。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <div id="justify1">
                                <div class="uk-button-dropdown" data-uk-dropdown="{justify:'#justify1'}">
                                    <button class="uk-button">Justify <i class="uk-icon-caret-down"></i></button>
                                    <div class="uk-dropdown">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;!-- 这是需要调整的下拉菜单的父元素 --&gt;
&lt;div id="my-id"&gt;

    &lt;!-- 这是关联了JavaScript的容器 --&gt;
    &lt;div class="uk-button-dropdown" data-uk-dropdown="{justify:'#my-id'}"&gt;

        &lt;!-- 拨动下拉菜单的元素 --&gt;
        &lt;button class="uk-button"&gt;...&lt;/button&gt;

        &lt;!-- 这是下拉菜单 --&gt;
        &lt;div class="uk-dropdown"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                            <hr class="uk-article-divider">

                            <h3>下拉菜单自动翻转</h3>

                            <p>默认情况下，当下拉菜单超出了视口边缘便会自动地翻转。如果你想根据容器的边界来翻转它，只需添加 <code>data-uk-dropdown="{boundary:'#ID'}"</code> 属性，这个属性中的ID对应容器的ID。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <div id="boundary" class="uk-button-dropdown" data-uk-dropdown="{boundary:'#boundary'}">
                                <button class="uk-button">Boundary <i class="uk-icon-caret-down"></i></button>
                                <div class="uk-dropdown">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div id="my-id"&gt;
    &lt;div class="uk-button-dropdown" data-uk-dropdown="{boundary:'#my-id'}"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="grid"><a href="#grid" class="uk-link-reset">网格</a></h2>

                            <p>你甚至可以在下拉菜单中放置一个包含导航或者其它内容的 <a href="grid.html" title="Grid component">网格组件</a>。只需用一个带有 <code>.uk-grid</code>类的 <code>&lt;div&gt;</code> 元素包裹着这些内容。为了优化下拉菜单中的网格，需要添加 <code>.uk-dropdown-grid</code> 类名。添加一个 <code>.uk-dropdown-width-*</code> 类名到网格的子元素，最多可以并列5个列。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-button-dropdown" data-uk-dropdown>
                                <button class="uk-button">2 Columns <i class="uk-icon-caret-down"></i></button>
                                <div class="uk-dropdown uk-dropdown-width-2">

                                    <div class="uk-grid uk-dropdown-grid">
                                        <div class="uk-width-1-2">

                                            <ul class="uk-nav uk-nav-dropdown uk-panel">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>

                                        </div>
                                        <div class="uk-width-1-2">

                                            <ul class="uk-nav uk-nav-dropdown uk-panel">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>

                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="uk-button-dropdown" data-uk-dropdown>
                                <button class="uk-button">3 Columns <i class="uk-icon-caret-down"></i></button>
                                <div class="uk-dropdown uk-dropdown-width-3">

                                    <div class="uk-grid uk-dropdown-grid">
                                        <div class="uk-width-1-3">

                                            <ul class="uk-nav uk-nav-dropdown uk-panel">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>

                                            <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur <a href="">adipisicing</a> elit, sed do eiusmod tempor incididunt.</div>

                                        </div>
                                        <div class="uk-width-1-3">

                                            <ul class="uk-nav uk-nav-dropdown uk-panel">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>

                                            <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur <a href="">adipisicing</a> elit, sed do eiusmod tempor incididunt.</div>

                                        </div>
                                        <div class="uk-width-1-3">

                                            <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur <a href="">adipisicing</a> elit, sed do eiusmod tempor incididunt.</div>
                                            <div class="uk-panel">Lorem ipsum dolor sit amet, consectetur <a href="">adipisicing</a> elit, sed do eiusmod tempor incididunt.</div>

                                        </div>
                                    </div>

                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-dropdown uk-dropdown-width-2"&gt;

    &lt;div class="uk-grid uk-dropdown-grid"&gt;
        &lt;div class="uk-width-1-2"&gt;
            &lt;ul class="uk-nav uk-nav-dropdown uk-panel"&gt;...&lt;/ul&gt;
            &lt;div class="uk-panel"&gt;...&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="uk-width-1-2"&gt;
            &lt;div class="uk-panel"&gt;...&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/div&gt;</code></pre>

                            <h3>响应式行为</h3>

                            <p>在狭窄的视口中，比如手机上，可能没有足够的空间来扩展下拉菜单。在这种情况下，下拉菜单会翻转它的对齐准线。如果还是没有足够的空间，网格列会占满宽度并在下拉菜单中垂直地堆叠。</p>

                             <hr class="uk-article-divider">

                            <h2 id="small-modifier"><a href="#small-modifier" class="uk-link-reset">缩小调整</a></h2>

                            <p>默认情况下，下拉菜单有一个固定的宽度并且文字会切换到下一行。如果你想要你的下拉菜单更小巧，以使它延伸到内容的宽度而不再使文本换行，添加 <code>.uk-dropdown-small</code> 类即可。这对一个按钮下拉菜单是很有用的。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <div class="uk-button-dropdown" data-uk-dropdown>
                                <button class="uk-button">Dropdown <i class="uk-icon-caret-down"></i></button>
                                <div class="uk-dropdown uk-dropdown-small">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div class="uk-dropdown uk-dropdown-small"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="scrollable-modifier"><a href="#scrollable-modifier" class="uk-link-reset">可滚动的修饰</a></h2>

                            <p>给下拉菜单添加固定高度，使它的内容可以滚动，只需添加 <code>.uk-dropdown-scrollable</code> 类。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <div class="uk-button-dropdown" data-uk-dropdown>
                                <button class="uk-button">Dropdown <i class="uk-icon-caret-down"></i></button>
                                <div class="uk-dropdown uk-dropdown-scrollable">
                                    <ul class="uk-nav uk-nav-dropdown">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li><a href="#">Yet another item</a></li>
                                        <li><a href="#">And another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;div class="uk-dropdown uk-dropdown-scrollable"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="navbar-modifier"><a href="#navbar-modifier" class="uk-link-reset">导航栏中的修饰</a></h2>

                            <p>下拉菜单是 <a href="navbar.html" title="Navbar component">导航栏组件</a> 的基本组成部分。只需添加 <code>.uk-dropdown-navbar</code> 类到下拉菜单中，这样下拉菜单便会完美地融入导航栏中。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <nav class="uk-navbar">

                                <ul class="uk-navbar-nav">
                                    <li class="uk-active"><a href="">Active</a></li>
                                    <li><a href="">Item</a></li>
                                    <li class="uk-parent" data-uk-dropdown>
                                        <a href="">Parent <i class="uk-icon-caret-down"></i></a>

                                        <div class="uk-dropdown uk-dropdown-navbar">
                                            <ul class="uk-nav uk-nav-navbar">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>
                                        </div>

                                    </li>
                                </ul>

                            </nav>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;nav class="uk-navbar"&gt;
    &lt;ul class="uk-navbar-nav"&gt;

        &lt;!-- 这是关联了JavaScript的容器 --&gt;
        &lt;li class="uk-parent" data-uk-dropdown&gt;

            &lt;!-- 拨动下拉菜单的菜单项 --&gt;
            &lt;a href=""&gt;...&lt;/a&gt;

            &lt;!-- 这是下拉菜单 --&gt;
            &lt;div class="uk-dropdown uk-dropdown-navbar"&gt;
                &lt;ul class="uk-nav uk-nav-navbar"&gt;
                    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;

        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="dropdown-blank"><a href="#dropdown-blank" class="uk-link-reset">空白下拉菜单</a></h2>

                            <p>有时你需要用到下拉菜单的功能但不想要它的样式。这时你直接用 <code>.uk-dropdown-blank</code> 来替代 <code>.uk-dropdown</code>就行了。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-margin">

                                <div class="uk-button-dropdown" data-uk-dropdown>
                                    <button class="uk-button">Hover me <i class="uk-icon-caret-down"></i></button>
                                    <div class="uk-dropdown-blank uk-panel uk-panel-box">
                                        <h3 class="uk-panel-title">Title</h3>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    </div>
                                </div>

                            <p><span class="uk-badge">NOTE</span> 在这个例子中，我们使用了<a href="panel.html">面板组件</a>来设定下拉菜单的样式。</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code> &lt;div class="uk-dropdown-blank uk-panel uk-panel-box"&gt;...&lt;/div&gt; </code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="dropdown-in-buttons"><a href="#dropdown-in-buttons" class="uk-link-reset">按钮中的下拉菜单</a></h2>

                            <p> <a href="button.html" title="Button component">按钮组件</a> 中的按钮可以用来切换下拉菜单。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <div class="uk-margin" data-uk-margin>

                                <div class="uk-button-dropdown" data-uk-dropdown>
                                    <button class="uk-button">Hover <i class="uk-icon-caret-down"></i></button>
                                    <div class="uk-dropdown uk-dropdown-small">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="uk-button-dropdown" data-uk-dropdown>
                                    <button class="uk-button uk-button-primary">Hover <i class="uk-icon-caret-down"></i></button>
                                    <div class="uk-dropdown uk-dropdown-small">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="uk-button-dropdown" data-uk-dropdown>
                                    <button class="uk-button uk-button-success">Hover <i class="uk-icon-caret-down"></i></button>
                                    <div class="uk-dropdown uk-dropdown-small">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="uk-button-dropdown" data-uk-dropdown>
                                    <button class="uk-button uk-button-danger">Hover <i class="uk-icon-caret-down"></i></button>
                                    <div class="uk-dropdown uk-dropdown-small">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="uk-button-dropdown" data-uk-dropdown>
                                    <button class="uk-button" disabled>Hover <i class="uk-icon-caret-down"></i></button>
                                    <div class="uk-dropdown uk-dropdown-small">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </div>

                            </div>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;!-- 这是关联了JavaScript的容器 --&gt;
&lt;div class="uk-button-dropdown" data-uk-dropdown&gt;

    &lt;!-- 这是切换下拉菜单的按钮 --&gt;
    &lt;button class="uk-button"&gt;...&lt;/button&gt;

    &lt;!-- 这是下拉菜单 --&gt;
    &lt;div class="uk-dropdown uk-dropdown-small"&gt;
        &lt;ul class="uk-nav uk-nav-dropdown"&gt;
            &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>按钮组中的下拉菜单</h3>

                            <p>使用 <a href="button.html" title="Button component">按钮组件</a> 中的按钮组，将按钮分作一个标准的按钮和一个下拉菜单拨动器。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <div class="uk-margin" data-uk-margin>
                                <div class="uk-button-group">
                                    <button class="uk-button">Button</button>
                                    <div data-uk-dropdown="{mode:'click'}">
                                        <button class="uk-button"><i class="uk-icon-caret-down"></i></button>
                                        <div class="uk-dropdown uk-dropdown-small">
                                            <ul class="uk-nav uk-nav-dropdown">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="uk-button-group">
                                    <button class="uk-button uk-button-primary">Button</button>
                                    <div data-uk-dropdown="{mode:'click'}">
                                        <a href="#" class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></a>
                                        <div class="uk-dropdown uk-dropdown-small">
                                            <ul class="uk-nav uk-nav-dropdown">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="uk-button-group">
                                    <button class="uk-button uk-button-success">Button</button>
                                    <div data-uk-dropdown="{mode:'click'}">
                                        <a href="#" class="uk-button uk-button-success"><i class="uk-icon-caret-down"></i></a>
                                        <div class="uk-dropdown uk-dropdown-small">
                                            <ul class="uk-nav uk-nav-dropdown">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="uk-button-group">
                                    <button class="uk-button uk-button-danger">Button</button>
                                    <div data-uk-dropdown="{mode:'click'}">
                                        <a href="#" class="uk-button uk-button-danger"><i class="uk-icon-caret-down"></i></a>
                                        <div class="uk-dropdown uk-dropdown-small">
                                            <ul class="uk-nav uk-nav-dropdown">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="uk-button-group">
                                    <button class="uk-button" disabled>Button</button>
                                    <div data-uk-dropdown="{mode:'click'}">
                                        <button class="uk-button" disabled><i class="uk-icon-caret-down"></i></button>
                                        <div class="uk-dropdown">
                                            <ul class="uk-nav uk-nav-dropdown">
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-header">Header</li>
                                                <li><a href="#">Item</a></li>
                                                <li><a href="#">Another item</a></li>
                                                <li class="uk-nav-divider"></li>
                                                <li><a href="#">Separated item</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div class="uk-button-group"&gt;

    &lt;!-- 这是一个按钮 --&gt;
    &lt;button class="uk-button"&gt;...&lt;/button&gt;

    &lt;!-- 这是关联了JavaScript的容器 --&gt;
    &lt;div data-uk-dropdown="{mode:'click'}"&gt;

        &lt;!-- 拨动下拉菜单的按钮 --&gt;
        &lt;a href="" class="uk-button"&gt;...&lt;/a&gt;

        &lt;!-- 这是下拉菜单 --&gt;
        &lt;div class="uk-dropdown uk-dropdown-small"&gt;
            &lt;ul class="uk-nav uk-nav-dropdown"&gt;
                &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="dropdown-in-subnavs"><a href="#dropdown-in-subnavs" class="uk-link-reset">子导航中的下拉菜单</a></h2>

                            <p>下拉菜单也可以用在 <a href="subnav.html" title="Subnav component">子导航组件</a> 中。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <ul class="uk-subnav uk-subnav-pill">
                                <li class="uk-active"><a href="#">Active</a></li>
                                <li><a href="#">Item</a></li>
                                <li data-uk-dropdown="{mode:'click'}">
                                    <a href="#">More <i class="uk-icon-caret-down"></i></a>
                                    <div class="uk-dropdown uk-dropdown-small">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;ul class="uk-subnav uk-subnav-pill"&gt;
    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;

    &lt;!-- 这是关联了JavaScript的容器 --&gt;
    &lt;li data-uk-dropdown="{mode:'click'}"&gt;

        &lt;!-- 拨动下拉菜单的导航元素 --&gt;
        &lt;a href=""&gt;...&lt;/a&gt;

        &lt;!-- 这是下拉菜单 --&gt;
        &lt;div class="uk-dropdown uk-dropdown-small"&gt;
            &lt;ul class="uk-nav uk-nav-dropdown"&gt;
                &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

    &lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="dropdown-in-tabs"><a href="#dropdown-in-tabs" class="uk-link-reset">选项卡中的下拉菜单</a></h2>

                            <p>下拉菜单可以用在 <a href="tab.html" title="Tab component">选项卡组件</a> 中。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <ul class="uk-tab uk-width-medium-1-2" data-uk-tab>
                                <li class="uk-active"><a href="#">Tab One</a></li>
                                <li><a href="#">Tab Two</a></li>
                                <li data-uk-dropdown="{mode:'click'}">
                                    <a href="#">More <i class="uk-icon-caret-down"></i></a>
                                    <div class="uk-dropdown uk-dropdown-small">
                                        <ul class="uk-nav uk-nav-dropdown">
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-header">Header</li>
                                            <li><a href="#">Item</a></li>
                                            <li><a href="#">Another item</a></li>
                                            <li class="uk-nav-divider"></li>
                                            <li><a href="#">Separated item</a></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;ul class="uk-tab" data-uk-tab&gt;
    &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;

    &lt;!-- 这是关联了JavaScript的容器 --&gt;
    &lt;li data-uk-dropdown="{mode:'click'}"&gt;

        &lt;!-- 拨动下拉菜单的选项卡标签 --&gt;
        &lt;a href=""&gt;...&lt;/a&gt;

        &lt;!-- 这是下拉菜单 --&gt;
        &lt;div class="uk-dropdown uk-dropdown-small"&gt;
            &lt;ul class="uk-nav uk-nav-dropdown"&gt;
                &lt;li&gt;&lt;a href=""&gt;...&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre>


                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript 选项</a></h2>

                            <p>这是关于如何通过属性设置选项的示例：</p>

                            <pre><code>data-uk-dropdown=&quot;{mode:'hover'}&quot;</code></pre>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>选项</th>
                                            <th>可用的值</th>
                                            <th>默认值</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>pos</code></td>
                                            <td>string</td>
                                            <td>bottom-left</td>
                                            <td>下拉菜单定位</td>
                                        </tr>
                                        <tr>
                                            <td><code>mode</code></td>
                                            <td>hover, click</td>
                                            <td>hover</td>
                                            <td>触发下拉菜单的行为</td>
                                        </tr>
                                        <tr>
                                            <td><code>remaintime</code></td>
                                            <td>integer</td>
                                            <td>800</td>
                                            <td>悬停模式下，自动关闭下拉菜单前的等待时间</td>
                                        </tr>
                                        <tr>
                                            <td><code>justify</code></td>
                                            <td>CSS selector</td>
                                            <td>false</td>
                                            <td>按指定元素的宽度拉伸下拉菜单</td>
                                        </tr>
                                        <tr>
                                            <td><code>boundary</code></td>
                                            <td>window</td>
                                            <td>CSS 选择器</td>
                                            <td>用被标注的元素来保持下拉菜单的可见性</td>
                                        </tr>
                                        <tr>
                                            <td><code>delay</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>悬停模式下，下拉菜单被显示前的延迟时间，以毫秒为单位。</td>
                                        </tr>
                                        <tr>
                                            <td><code>hoverDelayIdle</code></td>
                                            <td>integer</td>
                                            <td>250</td>
                                            <td>以毫秒为单位的，从一个打开下拉菜单将鼠标移至另一个下拉菜单这一过程中的延时。</td>
                                        </tr>
                                        </tr>
                                        <tr>
                                            <td><code>preventflip</code></td>
                                            <td>mixed</td>
                                            <td>false</td>
                                            <td>防止下拉菜单自动翻转</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                            <h3>事件</h3>

                            <p>你可以为自定义的功能绑定回调事件。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>事件名称</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>show.uk.dropdown</code></td>
                                            <td>下拉菜单显示时触发</td>
                                        </tr>
                                        <tr>
                                            <td><code>hide.uk.dropdown</code></td>
                                            <td>下拉菜单隐藏时触发</td>
                                        </tr>
                                        <tr>
                                            <td><code>stack.uk.dropdown</code></td>
                                            <td>当下拉菜单堆叠以适应屏幕时触发</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

<pre><code>$('[data-uk-dropdown]').on('show.uk.dropdown', function(){
    // custom code...
});
</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="css-options"><a href="#css-options" class="uk-link-reset">CSS 选项</a></h2>

                            <p>添加类名 <code>.uk-dropdown-close</code> 到下拉菜单容器或菜单条目，用于点击该条目时隐藏下拉菜单to dropdown container or to item to hide dropdown when user click on item.</p>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
